<!DOCTYPE html>
<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta name="viewport"
			content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<base target="_blank"/>
<title>问答</title>

		<style type="text/css">
			body{
				  background-color: rgb(105,175,225);
				  font: normal 15px arial;
				  color: white;
			}
			p {
			  	margin: 20px 0;
			}
			img {
				width: 20px;
			}
			li{
				  list-style-type: none;
			}
			table{
				  width: 280px;
			}
			.fgx img{
				width:100%;
				height:1px;
				margin:0;
				padding:0;
			}
			#confirm{
				  position: relative;
				  left: 66%;
				  border: 1px solid rgb(139,204,251);
				  padding: 5px 20px;
				  border-radius: 3px;
				  box-shadow: 0 1px 2px rgba(0,0,0,.2);
				  -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.2);
				  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
				  background-image: -webkit-linear-gradient(bottom, rgb(139,204,251) 3%, rgb(139,204,251) 97%, rgb(139,204,251) 100%);
			}
		</style>
		
</head>
<body>

<div>
	<p>请回答以下问题，以便我们给你带来更好的微信体验。</p>
	<p>下列哪一项最能描述你的工作？</p>
</div>

<div>
	<ul style="padding-left: 20px;">
		<li>
			<table>
				<tr>
					<td><img src="{cms>:$imagePath}/question_uncheck.png" style="width:5px;vertical-align: middle;"></td>
					<td style="width: 240px;">我帮助公司组织和预定会议</td>
					<td><img class="radio" src="{cms>:$imagePath}/question_uncheck.png" value="0"></td>
				</tr>
			</table>
		</li>
		<li>
			<table>
				<tr>
					<td><img src="{cms>:$imagePath}/question_uncheck.png" style="width:5px;vertical-align: middle;"></td>
					<td style="width: 240px;">我帮助我的上司和同事做差旅预定</td>
					<td><img class="radio" src="{cms>:$imagePath}/question_uncheck.png" value="1"></td>
				</tr>
			</table>
		</li>
		<li>
			<table>
				<tr>
					<td><img src="{cms>:$imagePath}/question_uncheck.png" style="width:5px;vertical-align: middle;"></td>
					<td style="width: 240px;">我帮助我们的客户做差旅和旅行预定</td>
					<td><img class="radio" src="{cms>:$imagePath}/question_uncheck.png" value="2"></td>
				</tr>
			</table>
		</li>
	</ul>
	<p>
		<?php echo '<input id="radio" type="hidden" value="-1" openid="'.$_GET["openid"].'">'; ?>
	</p>
</div>

<div class="fgx">
	<img src="{cms>:$imagePath}/question_line1.png">
	<img src="{cms>:$imagePath}/question_line2.png" style="position: relative;top: -16px;">
</div>
 
 <div>
 	<span id="confirm">确定</span>
 </div>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 		
<script>
	$(document).ready(function(){
		$(".radio").click(function(){
			$(".radio").attr("src", "{cms>:$imagePath}/question_uncheck.png");
			
			var cv = $(this).attr("value");
			var iv = $("input#radio").attr("value");
			
			if(cv != iv){
				$("input#radio").attr("value", cv);
				$(this).attr("src", "{cms>:$imagePath}/question_checked.png");
			}
			else{
				$("input#radio").attr("value", "-1");
				$(this).attr("src", "{cms>:$imagePath}/question_uncheck.png");
			}
		});
		
		$("#confirm").click(function(){
			var iv = $("input#radio").attr("value");
			if(iv == -1){
				alert("请至少选择一个选项！");
				return;
			}
			var oi = $("input#radio").attr("openid");
			  var submitData = {
					input 	: iv,
					openid : oi
				};
				$.post('index.php?g=Wap&m=Other&a=question', submitData,
					function(data) {
						if (data.success == true) {
							alert("提交成功，谢谢你的支持！");
							return
						} else { 
							alert('提交失败，请稍后再试！');
							return
						}
					},"json");
		});
	})
</script>
 		
</body>
</html>